/*
 * @Description: 我的车票列表页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:49:25
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:12:24
 */
<template>
  <div
    class="main fontsize32"
    v-wechat-title="$route.meta.title"
  >
    <div
      v-if="ticketList.length < 1"
      class="no_data"
    >
      <div class="icon">
        <img :src="noData">
      </div>
      <p>暂时没有可用车票</p>
      <div class="buy_ticket">
        <button>购买车票</button>
      </div>
    </div>
    <div
      v-else
      class="ticket_list"
    >
      <h3 class="fontsize32 ticket_num">可用票3张</h3>
      <my-ticket-item
        v-for="(ticket, index) in ticketList"
        :key="index"
      ></my-ticket-item>
    </div>
    <foot-bar selectedIndex="1"></foot-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      noData: require('@static/img/no-data.png'), // 无数据图片
      ticketList: [1, 2, 3] // 车票数据
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  .no_data {
    .icon {
      width: 522px;
      margin: auto;
      padding-top: 64px;
      padding-bottom: 32px;
      img {
        width: 100%;
      }
    }
    p {
      text-align: center;
      color: #9fb0b2;
    }
    .buy_ticket {
      width: 240px;
      margin: 160px auto;
      button {
        width: 100%;
        height: 68px;
        background: rgba(2, 122, 255, 1);
        border-radius: 25px; /*no*/
        border: 0;
        color: #fff;
      }
    }
  }
  .ticket_list {
    .ticket_num {
      padding: 32px;
    }
  }
}
</style>
